Form Handling এবং Validation Techniques

React Native অ্যাপ্লিকেশনে ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন অত্যন্ত গুরুত্বপূর্ণ, কারণ ফর্মের মাধ্যমে ব্যবহারকারী ইনপুট গ্রহণ করা হয়, এবং সঠিক ইনপুট নিশ্চিত করতে ভ্যালিডেশন প্রয়োজন হয়। ফর্মের ডেটা প্রক্রিয়া করতে এবং ইনপুটের ভুল এড়াতে, React Native-এ বিভিন্ন ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন টেকনিক্স ব্যবহার করা হয়।

১. Form Handling in React Native

React Native-এ ফর্ম হ্যান্ডলিং সাধারণত TextInput কম্পোনেন্টের মাধ্যমে করা হয়। ফর্মের প্রতিটি ইনপুটের মান স্টেটের মাধ্যমে নিয়ন্ত্রণ করা হয়, এবং ব্যবহারকারী ইনপুটের সাথে সম্পর্কিত পরিবর্তনগুলো onChangeText বা onChange প্রপার্টি দ্বারা ধরা হয়।

সাধারণ ফর্ম হ্যান্ডলিং:

import React, { useState } from 'react';
import { TextInput, Button, View, Text } from 'react-native';

const App = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = () => {
    // ফর্মের ইনপুট ডেটা এখানে প্রসেস করা হবে
    alert(`Name: ${name}\nEmail: ${email}\nPassword: ${password}`);
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      <TextInput
        placeholder="Enter your email"
        value={email}
        onChangeText={setEmail}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      <TextInput
        placeholder="Enter your password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

export default App;

এখানে কী হচ্ছে:

• useState হুকের মাধ্যমে প্রতিটি ফর্ম ইনপুটের মান রাখা হচ্ছে।
• TextInput কম্পোনেন্টে value এবং onChangeText প্রপার্টি ব্যবহার করে ইনপুটের মান স্টেটে সংরক্ষিত হচ্ছে।
• ব্যবহারকারী Submit বাটনে ক্লিক করলে handleSubmit ফাংশনটি ইনভোক করা হচ্ছে এবং ইনপুট ডেটা দেখানো হচ্ছে।

২. Form Validation Techniques

ফর্মের ইনপুট ভ্যালিডেশন গুরুত্বপূর্ণ, কারণ ব্যবহারকারীরা ভুল তথ্য দিয়ে ফর্ম সাবমিট করতে পারে। React Native-এ ফর্ম ভ্যালিডেশন করার জন্য সাধারণভাবে if স্টেটমেন্ট, RegEx এবং তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করা হয়।

ভ্যালিডেশন Techniques:

1. সাধারণ ভ্যালিডেশন (যেমন ফিল্ড খালি না থাকা):

const handleSubmit = () => {
  if (!name || !email || !password) {
    alert('All fields are required!');
    return;
  }

  if (!validateEmail(email)) {
    alert('Please enter a valid email!');
    return;
  }

  // ফর্মের ডেটা প্রসেস
  alert(`Name: ${name}\nEmail: ${email}\nPassword: ${password}`);
};

2. ইমেইল ভ্যালিডেশন (RegEx ব্যবহার করে):

const validateEmail = (email) => {
  const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  return regex.test(email);
};

এখানে কী হচ্ছে:

• validateEmail ফাংশনটি একটি রেগুলার এক্সপ্রেশন (RegEx) ব্যবহার করে ইমেইল ঠিকানা যাচাই করে।
• যদি ইনপুটগুলি খালি থাকে বা ইমেইল ভুল ফরম্যাটে থাকে, তাহলে alert প্রদর্শিত হবে।

৩. Error Messages এবং Conditional Rendering

ব্যবহারকারী যখন ভুল ইনপুট দেয়, তখন আপনাকে তাত্ক্ষণিকভাবে ত্রুটির বার্তা প্রদর্শন করতে হবে। React Native-এ ত্রুটির বার্তা দেখানোর জন্য সাধারণত Text কম্পোনেন্ট ব্যবহার করা হয় এবং এগুলিকে conditional rendering এর মাধ্যমে শো করা হয়।

const App = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});

  const validate = () => {
    const errors = {};
    if (!name) errors.name = 'Name is required';
    if (!email) errors.email = 'Email is required';
    if (!password) errors.password = 'Password is required';
    if (email && !validateEmail(email)) errors.email = 'Enter a valid email';
    setErrors(errors);

    return Object.keys(errors).length === 0;
  };

  const handleSubmit = () => {
    if (validate()) {
      alert(`Name: ${name}\nEmail: ${email}\nPassword: ${password}`);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      {errors.name && <Text style={{ color: 'red' }}>{errors.name}</Text>}
      
      <TextInput
        placeholder="Enter your email"
        value={email}
        onChangeText={setEmail}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      {errors.email && <Text style={{ color: 'red' }}>{errors.email}</Text>}
      
      <TextInput
        placeholder="Enter your password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      {errors.password && <Text style={{ color: 'red' }}>{errors.password}</Text>}
      
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

এখানে কী হচ্ছে:

• errors স্টেটটি ব্যবহৃত হচ্ছে ফর্মের প্রতিটি ফিল্ডের ত্রুটি বার্তা সংরক্ষণ করতে।
• ফর্মের ইনপুটের পাশে ত্রুটি বার্তা দেখানো হচ্ছে, যদি সংশ্লিষ্ট ফিল্ডটি ভুল বা খালি থাকে।

৪. তৃতীয় পক্ষের লাইব্রেরি ব্যবহার:

ফর্ম ভ্যালিডেশন এবং হ্যান্ডলিংয়ের জন্য অনেক তৃতীয় পক্ষের লাইব্রেরি উপলব্ধ, যেমন:

1. Formik: React Native-এ ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশনের জন্য এটি একটি জনপ্রিয় লাইব্রেরি।
2. Yup: এটি একটি ভ্যালিডেশন লাইব্রেরি যা সাধারণভাবে Formik এর সাথে ব্যবহৃত হয়।

Formik এর উদাহরণ:

import React from 'react';
import { TextInput, Button, View, Text } from 'react-native';
import { Formik } from 'formik';

const App = () => (
  <Formik
    initialValues={{ name: '', email: '', password: '' }}
    validate={(values) => {
      const errors = {};
      if (!values.name) errors.name = 'Name is required';
      if (!values.email) errors.email = 'Email is required';
      if (!values.password) errors.password = 'Password is required';
      return errors;
    }}
    onSubmit={(values) => alert(JSON.stringify(values, null, 2))}
  >
    {({ handleChange, handleBlur, handleSubmit, values, errors }) => (
      <View style={{ padding: 20 }}>
        <TextInput
          placeholder="Enter your name"
          onChangeText={handleChange('name')}
          onBlur={handleBlur('name')}
          value={values.name}
          style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        />
        {errors.name && <Text style={{ color: 'red' }}>{errors.name}</Text>}

        <TextInput
          placeholder="Enter your email"
          onChangeText={handleChange('email')}
          onBlur={handleBlur('email')}
          value={values.email}
          style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        />
        {errors.email && <Text style={{ color: 'red' }}>{errors.email}</Text>}

        <Text

Input
          placeholder="Enter your password"
          onChangeText={handleChange('password')}
          onBlur={handleBlur('password')}
          value={values.password}
          secureTextEntry
          style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        />
        {errors.password && <Text style={{ color: 'red' }}>{errors.password}</Text>}

        <Button title="Submit" onPress={handleSubmit} />
      </View>
    )}
  </Formik>
);

export default App;

সারাংশ

• Form Handling: React Native তে ফর্ম ইনপুটের মান স্টেট হ্যান্ডলিংয়ের মাধ্যমে নিয়ন্ত্রণ করা হয় এবং ইনপুটের পরিবর্তনগুলি onChangeText অথবা onChange প্রপার্টি দ্বারা ট্র্যাক করা হয়।
• Form Validation: ফর্ম ইনপুটের ভ্যালিডেশন সাধারণত if স্টেটমেন্ট, রেগুলার এক্সপ্রেশন (RegEx), এবং লাইব্রেরির মাধ্যমে করা হয়।
• Error Messages: ভ্যালিডেশন ত্রুটি হলে, ত্রুটির বার্তা ব্যবহারকারীকে জানানো হয় এবং Text কম্পোনেন্টের মাধ্যমে কন্ডিশনাল রেন্ডারিং করা হয়।
• তৃতীয় পক্ষের লাইব্রেরি যেমন Formik এবং Yup ব্যবহার করে ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন আরও সহজ করা যায়।

React Native অ্যাপে ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন কার্যকরভাবে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে।